<template>
	<view class="">
		<view v-if="!isLogin" class="login flex-col col-center row-center">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
			<image :src="imgUrl + '/wechat/static/images/goods_null.png'" v-show="!isLogin"></image>
			<view class="muted mt20" style="font-size: 36rpx;" v-show="!isLogin">请先登录商城</view>
		</view>
		<view v-else>
			<view class="top_nav_bar" :style="'zIndex:999;top:'+ menuButtonInfo.pos_top_height +'px'">
				<view class="float_bar"><float-cart-search></float-cart-search></view>
				<view class="logo_text">
					<image style="width: 240rpx; height: 58rpx; color: black;"
						src="../../static/images/black_joyloop_logo.png.png"></image>
				</view>
			</view>
			<loading-view v-if="isFirstLoading"></loading-view>
			<view class="goods-cate">
				<view class="top_tabs">
					<u-tabs-swiper ref="uTabs" :list="cateOneList" activeColor="#00632B" :current="swiperCurrent"
						@change="tabsChange()" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper style="height: 70vh;" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in cateOneList" :key="index">
						<scroll-view scroll-y @scrolltolower="onreachBottom">
							<view class="content">
								<view class="top_cat_bg" style="width: 750rpx; height: 375rpx;">
									<image style="width: 750rpx; height: 375rpx;"
										:src="cateOneList[swiperCurrent].bg_image"></image>
								</view>
								<view class="cat_content">
									<cate-cate-two :cate-list="cateTwoList" :firstcatid="firstcatid"
										:firstcurrid="swiperCurrent"></cate-cate-two>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="maskHeight2" class="overlay" @click="showPopCatFilter(0)"></view>

		</view>
		<!-- <mask-cat-filter :maskHeight2="maskHeight2" @click="showPopCatFilter(1)" @update="showPopCatFilter"></mask-cat-filter> -->
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getLevelOneList,
		getGoodsList,
		getListByLevelOne,
		getAllcateGroup,
		getAdList
	} from '@/api/store';
	import {
		getRect,
		trottle,
		arraySlice
	} from '@/utils/tools';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from '@/utils/cache'
	import {
		TABBAROPTION,
		ALLCATELIST
	} from '@/config/cachekey';
	export default {
		data() {
			return {
				isFirstLoading: true,
				// current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				maskHeight2: 0,
				cateList: [],
				imgUrl: `${this.$imgUrl}`,
				allCateList: [],
				cateOneList: [],
				cateTwoList: [],
				selectIndex: 0,
				firstcatid: 0,
				name: '',
				cateTwoId: 0,
				currIndex: 0,
				tabBarOptions: {},
				menuButtonInfo: {},
			};
		},
		async onLoad(options) {
			this.tabBarOptions = Cache.get(TABBAROPTION);
			//重置
			Cache.set(TABBAROPTION, {});
			// this.getLevelOneListFun();
			this.getAllcateGroupFunc()
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
		},
		onShow() {
			this.getCartNum()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.cateTwoList = this.allCateList[index] && this.allCateList[index].children ? this.allCateList[index]
					.children : [];
				this.firstcatid = this.allCateList[index].id;
				console.log('====this.allCateList[index]=====', this.allCateList[index]);
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

				this.cateTwoList = this.allCateList[current] && this.allCateList[current].children ? this.allCateList[
					current].children : [];
			},
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo.pos_top_height = this.menuButtonInfo.top + 4;
				// console.log('=====getMenuButtonInfo====this.menuButtonInfo========', this.menuButtonInfo)
			},
			showPopCatFilter(isShow) {
				console.log('===高度增加=showPopCatFilter======' + isShow);
				this.maskHeight2 = isShow;
			},
			hidePopCatFilter() {
				console.log('====hidePopCatFilter=====');
				this.maskHeight2 = 0;
			},
			...mapActions(['getCartNum']),
			async getAllcateGroupFunc(query) {
				const {
					code,
					data
				} = await getAllcateGroup();
				this.isFirstLoading = false;
				if (code == 1) {
					this.allCateList = data;
					Cache.set(ALLCATELIST, this.allCateList);
					this.firstcatid = this.allCateList[0].id;
					this.cateOneList = data.map((item, index) => ({
						name: item.name,
						id: item.id,
						bg_image: item.bg_image
					}));
					this.cateTwoList = data[0].children;
				}
			},
		},
		computed: {
			...mapGetters(['inviteCode', 'appConfig', 'distribution', 'showLoading']),
		}
	};
</script>
<style lang="scss" scoped>
	$header-height: 94rpx;

	page {
		background-color: #fff;
		height: 100%;

		.top_nav_bar {
			position: fixed;
			z-index: 999;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.float_bar {
				margin-left: 20rpx;
				// border: $-color-border solid 2rpx;
				border-radius: 30rpx;
			}

			.logo_text {
				width: 240rpx;
				margin-left: 85rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.login {
			height: calc(100vh - var(--window-bottom));
			background: #fff;
			text-align: center;
		}

		.goods-cate {

			position: relative;
			top: 200rpx;
			height: 100%;

			.top_tabs {
				margin: 0rpx 120rpx;
			}

			.header {
				box-sizing: border-box;
				height: $header-height;
				border-bottom: $-solid-border;

				.search {
					flex: 1;
					height: 60rpx;

					input {
						flex: 1;
						height: 100%;
					}
				}
			}

			.top_cat_bg {
				margin-top: 20rpx;
			}

			.content {

				// height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom) - 50px - env(safe-area-inset-bottom));
				.cat_content {
					position: relative;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
				}
			}
		}

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			/* 确保在 u-mask 之上 */
			background-color: transparent;
			/* 透明遮罩 */
		}





	}
</style>